<template>
  <div class="inner">
    <div>
      <div class="title">
        <p>志愿者之家</p>
      </div>
      <div>
        <img class="zyz_bg" src="../../assets/image/zyz_bg.png" alt />

        <p class="center_title">简介</p>

        <div class="jianjie_content">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2019年10月26日，舟山博物馆在四楼多功能教育厅成功举办19届舟博志愿社志愿者培训班，来自浙江海洋大学、浙江国际海运职业技术学院、东海科学技术学院等院校的85名新晋志愿者参加为期一天的培训。
          今年的志愿者相对往年来说，不仅人数增加，在服务要求上更是严格。为此舟山博物馆针对培训内容进行了精心组织，除了《认识博物馆》，今年新增《舟山博物馆志愿者工作须知》，把馆内所有的志愿者工作内容以及注意事项进行全面解析，以便更好的开展志愿服务，响应创城工作，同时邀请博物馆宣传教育部相关负责人为新晋志愿者授课。通过文博专业知识、志愿者礼仪规范、志愿者日常工作解析、实地示范讲解等，带领大家深度解读舟山博物馆，了解舟博志愿社。培训结束后，舟山博物馆舟博志愿社总结汇报了2019年度志愿者的服务情况,并对在该年度志愿服务活动中表现突出的14名志愿者进行先进优秀表彰，颁发奖状以及舟山博物馆特别定制的礼品，以便更好地激发志愿者的热情。
          通过此次培训，志愿者深入了解了博物馆志愿者工作的流程，同时深化了大家对于舟山本地历史的了解。作为舟山博物馆重要的服务力量，全体志愿者将不断提升自身素质，增强志愿服务意识，致力社会公益事业的发展。
        </div>

        <!-- <p class="center_title">
          <span>章程</span>
          <span>详情</span>
        </p>

        <div class="zhangcheng_content">
          <p class="small_title">第一章 总则</p>
          <p class="diyizhang">第一章 根据国家志愿者相关条例</p>
          <p class="diyizhang">第二条 志愿者是基于良知</p>

          <p class="diyizhang">
            第三条 博物馆志愿者是利用自身特长来补充博物馆人力资源
          </p>
          <p class="small_title" style="margin-top:60px">第二章 总则</p>
          <p class="diyizhang">
            第四条 博物馆志愿者是利用自身特长来补充博物馆人力资源
          </p>
        </div>-->
        <p class="center_title">
          <span>志愿者招募</span>
          <span class="more" @click="tozhaomutable()">详情</span>
        </p>
        <ul class="zjz_li">
          <li
            style="  cursor: pointer;"
            v-for="(item, index) of zhaomu"
            :key="index"
            @click="tozhaomudetail(item.id)"
          >{{ item.title }}</li>
        </ul>
        <p class="center_title">
          <span>志愿者风采</span>
          <span class="more" @click="tofengcaitable()">详情</span>
        </p>
        <ul class="zjz_li">
          <li
            style="  cursor: pointer;"
            v-for="(item, index) of fengcai"
            :key="index"
            @click="tofengcaidetail(item.id)"
          >{{ item.title }}</li>
        </ul>
      </div>
      <div>
        <div class="ljbm_bg">
          <p @click="tankuang()">立即报名</p>
        </div>
        <div class="tankuang_bg">
          <el-dialog :visible.sync="dialogTableVisible" :center="true" @close="Close()">
            <div class="content_k">
              <p class="content_k_title">志愿者报名</p>
              <ul>
                <li class="input_bg">
                  <label for>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</label>
                  <input v-model="name" type="text" />
                </li>
                <!-- <li class="radio">
                  <label for>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</label>
                  <p>
                    <span>男</span>
                    <input type="radio" value="One" v-model="man" />
                    <span>女</span>
                    <input type="radio" value="Twe" v-model="man" />
                  </p>
                </li>-->
                <li class="input_bg">
                  <label for>联系方式</label>
                  <input type="text" v-model="realMobile" />
                </li>
                <li class="input_bg">
                  <label for>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱</label>
                  <input type="text" v-model="email" />
                </li>
                <li class="xiazai">
                  <label>请先下载模板,填写完毕后上传</label>
                  <div class="btns">
                    <!-- <div id="a1" @click="xiazai()">模板下载</div> -->
                    <a id="a1" :href="url">模板下载</a>
                  </div>
                </li>
                <li>
                  <p class="shangchuan">
                    <el-upload
                      ref="upload"
                      class="upload-demo"
                      :action="getFileUrl()"
                      name="file"
                      :on-change="handleChange"
                      :headers="tokenHeader"
                    >
                      点击上传
                      <!-- <div slot="tip" class="el-upload__tip">只能上传文件，且不超过500kb</div> -->
                    </el-upload>
                  </p>
                </li>
                <li class="yanzhengma">
                  <label for>验证码</label>
                  <input type="text" v-model="yzm" />
                  <div
                    class="ValidCode disabled-select"
                    style="width:100px;height:34px;"
                    @click="refreshCode"
                  >
                    <span
                      v-for="(item, index) in codeList"
                      :key="index"
                      :style="getStyle(item)"
                    >{{ item.code }}</span>
                  </div>
                  <!-- <div class="shuzi" v-html="toyzm1"></div> -->
                  <img :src="yzm" alt />
                  <span class="tip" @click="refreshCode">看不清 换一张</span>
                </li>
              </ul>
              <p class="btn" @click="over">点击完成</p>
            </div>
          </el-dialog>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import { JudgeLogin } from "../../api/login";
import axios from "axios";
export default {
  data() {
    return {
      codeList: [],
      yzm: "",
      fengcai: "",
      zhaomu: "", //招募
      //标记下载的URL
      url: "",
      xzfileName: "",
      //这里填写你存储的token
      tokenHeader: { Authorization: localStorage.getItem("token") },
      name: "",
      fileName: "",
      man: "",
      realMobile: "",
      year: "",
      sfz: "",
      email: "",
      fileName: "",
      filePath: "",
      xiazai1: "",
      dialogTableVisible: false,
      dialogFormVisible: false,
      activeName: "first",
      // message: [{}],
      right: true,
      newxx: [{}],
      productList: [{}], //所有数据
      totalPage: 1, // 统共页数，默认为1
      currentPage: 1, //当前页数 ，默认为1
      pageSize: 5, // 每页显示数量
      currentPageData: [], //当前页显示内容
    };
  },
  created() {
    this.muban();
    // this.zhaomu()
  },
  mounted() {
    this.zhaomuzy();
    this.fengcaizy();
    this.createdCode();
  },
  methods: {
    ...mapActions(["isShow", "isHide"]),
    //yzm
    // 验证码
    refreshCode() {
      this.createdCode();
    },
    createdCode() {
      const len = 4;
      const codeList = [];
      const chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789";
      const charsLen = chars.length;

      // 生成
      for (let i = 0; i < len; i++) {
        const rgb = [
          Math.round(Math.random() * 220),
          Math.round(Math.random() * 240),
          Math.round(Math.random() * 200),
        ];
        codeList.push({
          code: chars.charAt(Math.floor(Math.random() * charsLen)),
          color: `rgb(${rgb})`,
          fontSize: `1${[Math.floor(Math.random() * 10)]}px`,
          padding: `${[Math.floor(Math.random() * 10)]}px`,
          transform: `rotate(${
            Math.floor(Math.random() * 90) - Math.floor(Math.random() * 90)
          }deg)`,
        });
      }
      // 指向
      this.codeList = codeList;

      // 将当前数据派发出去
      this.$emit("update:value", codeList.map((item) => item.code).join(""));
    },
    getStyle(data) {
      return `color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}`;
    },

    tofengcaitable() {
      this.$router
        .push({
          path: "/zhidujianshe/zhiyuanzhefengcaitable",
          query: { orderId: "志愿者之家" },
        })
        .catch((err) => {
          err;
        });
    },
    tozhaomutable() {
      this.$router
        .push({
          path: "/zhidujianshe/zhiyuanzhezhaomutable",
          query: { orderId: "志愿者之家" },
        })
        .catch((err) => {
          err;
        });
    },
    tofengcaidetail(id) {
      this.$router
        .push({
          path: `/zhidujianshe/zhiyuanzhefengcaidetail?id=${id}`,
          query: { orderId: "志愿者之家", sort: 60 },
        })
        .catch((err) => {
          err;
        });
    },
    tozhaomudetail(id) {
      this.$router
        .push({
          path: `/zhidujianshe/zhiyuanzhezhaomudetail?id=${id}`,
          query: { orderId: "志愿者之家", sort: 59 },
        })
        .catch((err) => {
          err;
        });
    },
    //志愿者招募
    zhaomuzy() {
      this.$api.post(`${this.tableList}zhiyuanzhezhaomu-1-4`).then((res) => {
        this.zhaomu = res.data.page.list;
        this.zhaomu.splice(4);
        // console.log(this.zhaomu, 111);
      });
    },
    fengcaizy() {
      this.$api.post(`${this.tableList}zhiyuanzhefengcai-1-4`).then((res) => {
        // console.log(res, 99);
        this.fengcai = res.data.page.list;
        this.fengcai.splice(4);
      });
    },
    //下载模板
    muban() {
      this.$api.post(this.zs + "/volunteer/apply/list").then((res) => {
        this.xzfileName = res.data.data.fileName;
        this.filePath = res.data.data.filePath;
        // console.log(res);
        this.url =
          `${this.loadown}/volunteer/apply/downloads?filePath=` +
          this.xzfileName;
      });
    },
    //下载功能

    xiazai() {
      console.log(localStorage.getItem("token"));
      // /volunteer/apply/downloads?filePath=
      //     axios({
      //     method:"POST",
      //     url:"http://47.99.59.109/zhoushanManager/volunteer/apply/downloads?filePath=aa.docx",
      //     // data:{filePath:"aa.docx"},            //参数
      //     headers:{
      //         //请求头携带的token
      //         'Content-Type': 'multipart/form-data',
      //     }
      // }).then(res=>{
      //   console.log(res)

      // })
    },
    Close(fileList) {
      this.dialogTableVisible = false;

      this.$refs.upload.clearFiles();
    },

    //上传
    getFileUrl() {
      //z这里写url地址
      return this.zs + "/volunteer/apply/upload";
    },
    handleChange(file, fileList) {
      if (!fileList[0].response) return;

      this.fileName = fileList[0].response.data.fileName;
      this.filePath = fileList[0].response.data.filePath;
    },

    //提交
    over() {
      JudgeLogin(this).then((res) => {
        if (res.code != "UnLogin" && res.email != "") {
          let yzm = this.yzm;

          // let num = /^[1]([3-9])[0-9]{9}$/;
          // let sfz_num = /^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/;
          // let mail_num = /^[A-Za-z0-9-._]+@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,6})$/;

          let str = [];
          this.codeList.forEach((item) => {
            str.push(item.code);
          });
          let arr = str.join(""); //按照(什么方式)空格拼接
          console.log(yzm, arr);
          if (yzm.toLowerCase() != arr.toLowerCase()) {
            this.$message({
              message: "验证码有误",
              type: "error",
              duration: 1000,
              offset: 320,
            });
            (this.yzm = ""), this.createdCode();
            return;
          }
          if (!this.filePath || !this.fileName) {
            this.$message({
              message: "请先下载模板并且上传",
              type: "warning",
              duration: 1000,
              offset: 320,
            });
            return;
          }
          this.$api
            .post(
              this.zs +
                `/volunteer/apply?filePath=${this.filePath}&fileName=${this.fileName}`
            )
            .then((res) => {
              (this.yzm = ""), this.createdCode();

              if (res.data.code == "OK") {
                this.$message({
                  message: "志愿者报名成功",
                  type: "success",
                  duration: 1000,
                  offset: 320,
                });

                this.dialogTableVisible = false;
              } else {
                this.$message({
                  message: res.data.msgDetail,
                  type: "success",
                  duration: 1000,
                  offset: 320,
                });
              }
            });
        }
      });
    },
    tankuang(index) {
      JudgeLogin(this).then((res) => {
        if (res.code != "UnLogin" && res.email != "") {
          this.dialogTableVisible = true;
          this.createdCode();
          this.name = res.info.name;
          this.realMobile = res.info.realMobile;
          this.email = res.info.email;
        }
      });
      this.filePath = "";

      this.fileName = "";
      this.xiabiao = index;
      this.yzm = "";
    },
  },
};
</script>
<style scoped>
.ValidCode {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
span {
  display: inline-block;
}
li {
  list-style: none;
}
p,
ul {
  padding: 0px;
  margin: 0px;
}
.gwgk .title {
  font-size: 30px;
  border-bottom: 2px solid rgb(107, 128, 173);
  color: rgb(107, 128, 173);
  margin-bottom: 50px;
}
.title > p {
  padding-left: 35px;
  margin-bottom: 10px;
}
.more {
  cursor: pointer;
}
.gwgk ul,
li,
p {
  padding: 0px;
  margin: 0px;
}

.gwgk .blue {
  color: rgb(25, 67, 119);
}
.zyz_bg {
  margin-bottom: 75px;
}
.center_title {
  background: #f4f4f4;
  margin-bottom: 30px;
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
}
.center_title span:nth-child(2) {
  font-size: 20px;
}
.jianjie_content {
  margin-bottom: 60px;
  padding-left: 20px;
  line-height: 45px;
  font-size: 16px;
}
.zhangcheng_content {
  margin-bottom: 80px;
  padding-left: 20px;
}
.inner {
  margin-bottom: 100px;
}
.diyizhang {
  margin-bottom: 20px;
  font-size: 16px;
}
.small_title {
  margin-bottom: 60px;
  font-size: 16px;
}
ul.zjz_li {
  margin-bottom: 60px;
  padding-left: 15px;
  font-size: 16px;
}
ul.zjz_li li {
  border-bottom: 1px solid gray;
  padding: 10px 0px;
}
.ljbm_bg {
  background: url("../../assets/image/ljbm.png") no-repeat;
  width: 375px;
  height: 60px;
  text-align: center;
  margin: auto;
  line-height: 60px;
  cursor: pointer;
}
.ljbm_bg p {
  color: white;
  font-size: 24px;
}
/* tankuang */
.tankuang_bg .content_k {
  width: 565px;
  text-align: center;
  padding-bottom: 40px;
}
.tankuang_bg >>> .el-dialog {
  width: 550px;
}
.tankuang_bg >>> .el-dialog__body {
  padding: 0px;
}
.content_k_title {
  margin-bottom: 41px;
  font-size: 24px;
}
.content_k ul {
  margin: auto;
}
.content_k li {
  margin-bottom: 30px;
}
.input_bg input {
  outline: none;
  width: 350px;
  height: 33px;
  border: none;
  box-sizing: border-box;
  padding-left: 20px;
  background: url("../../assets/image/column/input_bg.png") no-repeat;
}
.content_k li label {
  margin-right: 50px;
  font-size: 18px;
}
.radio {
  box-sizing: border-box;
  padding: 0 44px;
  display: flex;
  justify-content: space-between;
}
.radio p {
  width: 350px;
  display: flex;
  justify-content: flex-start;
}
.radio span {
  display: inline-block;
  margin-right: 20px;
}
.radio input {
  margin-right: 20px;
}
.yanzhengma {
  display: flex;
  box-sizing: border-box;
  padding: 0 45px;
  justify-content: space-between;
  margin-bottom: 55px;
}
.yanzhengma p {
  width: 350px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.yanzhengma input {
  width: 100px;
  height: 35px;
  margin-right: 10px;
}
.shuzi {
  width: 60px;
  height: 35px;
  background: cadetblue;
  margin-right: 10px;
}
.btn {
  background: url("../../assets/image/ljbm.png") no-repeat;
  width: 375px;
  height: 60px;
  text-align: center;
  margin: auto;
  line-height: 60px;
  cursor: pointer;
  color: white;
  font-size: 18px;
}
.xiazai {
  display: flex;
  justify-content: center;
}
.xiazai span {
  display: inline-block;
  width: 100px;
  height: 30px;
  background: darkcyan;
  border-radius: 5px;
  line-height: 30px;
  color: white;
}
.xiazai label {
  font-size: 14px !important;
  color: red;
}
.shangchuan {
  text-align: center;
  margin: auto;
  margin-bottom: 50px;
  background: darkgoldenrod;
  border-radius: 5px;
  line-height: 30px;
  color: white;
  width: 200px;
  height: 30px;
}
</style>
